<template>
  <div class="container">
    <!-- 首页轮播图 (还可以实现tab的左右切换) -->
    <div class="slider">
      <swiper indicator-dots autoplay circular :interval="2000">
        <!-- block非语义化标签 -->
        <swiper-item v-for="(item, key) in imgUrls" :key="key">
          <img :src="item.pics_big" class="slide-image" mode="aspectFill" />
        </swiper-item>
      </swiper>
    </div>
    <div class="ware-price">
      ￥{{ware.goods_price}}
    </div>
    <div class="ware-info">
      <div class="ware-title">
        {{ware.goods_name}}
      </div>
      <div class="ware-star">
        <span class="iconfont icon-jiaxingshoucang"></span><br>
        收藏
      </div>
    </div>

    <!-- 商品详情 -->
    <div class="ware-detail">
      <h4>商品详情</h4>
      <div v-html="ware.goods_introduce"></div>
    </div>

    <!-- 底部 -->
    <div class="footer">
      <button class="contact" open-type="contact"></button>
      <div class="footer-left">
        <div class="iconfont icon-dianhua"></div>
        <span>联系客服</span>
      </div>
      <navigator class="footer-left" url="/pages/cart/main" open-type="switchTab">
        <div class="iconfont icon-liwu"></div>
        <span>购物车</span>
      </navigator>
      <div class="footer-right" @tap="handleAddCart">
        <span>加入购物车</span>
      </div>
      <div class="footer-right bgRed">
        <navigator url="/pages/cart/main" open-type="switchTab">
          <span>立即购买</span>
        </navigator>
      </div>
    </div>
  </div>
</template>

<script>
import request from "../../utils/request.js";
export default {
  data () {
    return {
      imgUrls:[],
      ware:{} // 当前商品
    }
  },
  onLoad(query){
    const goods_id = query.goods_id;
    request.get("https://itjustfun.cn/api/public/v1/goods/detail",{goods_id})
    .then(res =>{
      const {data} = res.data;
      // 设置轮播图
      this.imgUrls = data.pics;
      // 设置整个商品信息
      this.ware = data;
    })
  },
  methods: {
    // 加入购物车
    handleAddCart(){
      console.log(this.ware);
      // 不用数组，因为查找列表的某个数据会很麻烦
      // let goods = [];
      // goods.push(this.ware);

      // 使用对象方便我们找到列表某个商品
      let goods = wx.getStorageSync("goods") || {};
      // 给商品添加上件数
      this.ware.num = 1;
      // 给商品加上是否选择的属性
      this.ware.selected = true;
      goods[this.ware.goods_id] = this.ware;
      wx.setStorageSync("goods",goods);
      
      // 提示加入购物车成功
      wx.showToast({
        title:"加入购物车成功",
        icon:"success"
      })
    }
  }
}
</script>

<style scoped lang="scss">
@import "style.scss";
</style>
